<template>
  <div
    v-loading.fullscreen.lock="listLoading"
    class="dashboard-editor-container"
  >

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col">
        <div class="block">
          <span class="title">选择网络设备：</span>
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-tooltip v-for="city in list" :key="city._id" :content="city.name + '/' + city.city + '/' + city.telecom" placement="top">
              <el-checkbox :label="city.deviceid">
                {{ city.deviceid }}
              </el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
        </div>

        <div class="block">
          <span class="title">选择时间范围：</span>
          <el-date-picker
            v-model="datatime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            :default-time="['23:59:59', '23:59:59']"
            @change="handleDateChange"
          />
        </div>
      </el-col>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
import LineChart from "./components/LineChart";
import flows from "@/api/flows";
import devices from "@/api/devices";

export default {
  name: "DashboardAdmin",
  components: {
    LineChart
  },
  data() {
    const currOjb = this
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '过去24小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // start.setTime(start.getTime() - 3600 * 1000 * 24);
              currOjb.initDate(start, end, 1)
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              currOjb.initDate(start, end, 7)
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              currOjb.initDate(start, end, 30)
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              currOjb.initDate(start, end, 90)
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      datatime: [],
      defaulttime: ['23:59:59', '23:59:59'],
      list: [],
      range: ['过去24小时', '7天', '1个月'],
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      lineChartData: [],
      listLoading: false
    };
  },
  created() {
    this.getList();
    // 初始化日期选择器
    const end = new Date();
    const start = new Date();
    this.initDate(start, end, 1)
    this.datatime = [start, end]
  },
  methods: {
    getList() {
      this.listLoading = true;
      devices.list({}).then(response => {
        if (response.data.data && response.data.data.list) {
          const cities = [];
          for (const device of response.data.data.list) {
            cities.push(device.deviceid);
          }
          this.cities = cities;
          this.list = response.data.data.list;
        }
        this.listLoading = false;
      });
    },
    initDate(start, end, days) {
      start.setTime(start.getTime() - 3600 * 1000 * 24 * days);
      start.setHours(23)
      end.setHours(23)
      start.setMinutes(59)
      end.setMinutes(59)
      start.setSeconds(59)
      end.setSeconds(59)
    },

    // 获取数据流
    getFlows() {
      // console.log("flows");

      this.listLoading = true;
      const devices = this.list
        .map(e => (this.checkedCities.includes(e.deviceid) ? e._id : null))
        .filter(e => e);

      const start = this.datatime && this.datatime.length > 0 ? this.datatime[0] : new Date()
      const end = this.datatime && this.datatime.length > 1 ? this.datatime[1] : new Date()
      if (devices.length > 0) {
        flows.echarts({ device: devices.join(","), start, end }).then(response => {
          this.lineChartData = response.data.data && response.data.data.list;
          this.listLoading = false;
        });
      } else {
        this.listLoading = false;
      }
    },
    // 更新选择的设备，全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
      this.getFlows();
    },
    // 更新选择的设备，单选
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      // 是否全选
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;

      // console.log(this.checkedCities);
      this.getFlows();
    },
    handleDateChange(value) {
      // console.log(this.datatime);
      // this.getFlows();
      this.getFlows();
    }

  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.block {
    padding: 20px 0;
    overflow: hidden;
    border-bottom: 1px solid #eff2f6;
    .title {
    font-size: 14px;
    color: #8492a6;
    line-height: 44px;
}
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
